/**
 * 采购管理 应付款
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>采购管理</el-breadcrumb-item>
      <el-breadcrumb-item>采购订单</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <!-- <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        > -->
      </el-form-item>
    </el-form>
    <!-- 这是一个选项卡  入库记录，还有审核通过的采购订单记录 -->
    <el-tabs value="second">
      <el-tab-pane label="应付款" name="third">
        <el-table
          size="small"
          :data="list1"
          highlight-current-row
          v-loading="loading"
          border
          element-loading-text="拼命加载中"
          style="width: 100%"
        >
          <el-table-column align="center" type="selection" width="60">
          </el-table-column>
          <el-table-column sortable prop="id" label="应付款单号" width="150">
          </el-table-column>
          <el-table-column sortable prop="payTime" label="付款日期" width="150">
          </el-table-column>

          <el-table-column
            sortable
            prop="happenDate"
            label="发生日期"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="supplierId"
            label="供应商"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="monerary" label="货币" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="dueMoney"
            label="应付金额"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="paidMoney"
            label="已付金额"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="remainMoney" label="余额" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="buyORerturn"
            label="采购/退货"
            width="150"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.buyORerturn==2"
                :type="scope.row.tag === '退货' ? 'primary' : 'success'"
                disable-transitions
                >退货</el-tag
              >
               <el-tag v-if="scope.row.buyORerturn==1"
                :type="scope.row.buyORerturn === '采购' ? 'primary' : 'success'"
                disable-transitions
                >采购</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            sortable
            prop="operarorID"
            label="操作员"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="examinerID"
            label="审核人"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="others" label="备注" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="chargeoff"
            label="核销状态/是否核销"
            width="150"
          >
          </el-table-column>

          <!-- <el-table-column
            fixed="right"
            align="center"
            label="操作"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="OpenDialog1(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="采购入库" name="first">
        <el-table
          size="small"
          :data="list2"
          highlight-current-row
          v-loading="loading"
          border
          element-loading-text="拼命加载中"
          style="width: 100%"
        >
          <el-table-column align="center" type="selection" width="60">
          </el-table-column>
          <el-table-column sortable prop="id" label="采购入库单号" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="supplierName"
            label="供应商"
            width="150"
          >
          </el-table-column>

          <el-table-column
            sortable
            prop="orderDate"
            label="订单日期"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="delicerDate"
            label="交货日期"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="monetary" label="货币" width="150">
          </el-table-column>
          <el-table-column sortable prop="buyerID" label="采购人" width="150">
          </el-table-column>
          <el-table-column sortable prop="pOD" label="交货地点" width="150">
          </el-table-column>
          <el-table-column sortable prop="others" label="备注" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="operatorID"
            label="操作员"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="examinerID"
            label="审核人"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="examineState"
            label="审核状态"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="deal" label="是否完成" width="150">
          </el-table-column>

          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="OpenDialog2(scope.$index, scope.row)"
                >生成应付款文件</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="采购退货" name="second">
        <el-table
          size="small"
          :data="list3"
          highlight-current-row
          v-loading="loading"
          border
          element-loading-text="拼命加载中"
          style="width: 100%"
        >
          <el-table-column align="center" type="selection" width="60">
          </el-table-column>
          <el-table-column
            sortable
            prop="id"
            label="采购退货单单号"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="supplierID"
            label="供货商"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="monetary" label="货币" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="returnedDate"
            label="退货日期"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="shipperID" label="发货人" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="operatorID"
            label="操作员"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="enterDate"
            label="录入日期"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="opmanID" label="修改人" width="150">
          </el-table-column>
          <el-table-column sortable prop="opDate" label="修改日期" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="examinerID"
            label="审核人"
            width="150"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="examineDate"
            label="审核日期"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="others" label="备注" width="150">
          </el-table-column>
          <el-table-column
            sortable
            prop="examineState"
            label="审核状态"
            width="150"
          >
          </el-table-column>
          <el-table-column sortable prop="inDate" label="修改日期" width="150">
          </el-table-column>

          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="OpenDialog3(scope.row)"
                >生成应付款文件
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 生成采购应付款文件  begin -->
    <el-dialog title="生成采购应付款文件" :visible.sync="Dialog2" width="70%">
      <el-form :inline="true" :model="AddForm" class="user-search">
        <el-form-item label="付款日期">
          <el-date-picker
            v-model="AddForm.PayTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发生日期">
          <el-date-picker
            v-model="AddForm.HappenDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="AddForm.SupplierId" placeholder="请选择供应商">
            <el-option
              v-for="item in Suppliers"
              :key="item.id"
              :label="item.supplierName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货币">
          <el-select v-model="AddForm.Monerary" placeholder="请选择货币">
            <el-option label="人民币" value="人民币"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="应付金额">
          <el-input
            v-model="AddForm.DueMoney"
            placeholder="应付金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="已付金额">
          <el-input
            v-model="AddForm.PaidMoney"
            placeholder="已付金额"
          ></el-input>
        </el-form-item>

        <el-form-item label="余额">
          <el-input
            v-model="AddForm.RemainMoney"
            placeholder="未付金额"
          ></el-input>
        </el-form-item>

        <el-form-item label="采购/退货">
          <el-input
            disabled
            v-model="AddForm.BuyORerturn"
            placeholder="采购"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作员">
          <el-input disabled v-model="userName"></el-input>
        </el-form-item>

        <el-form-item label="核销状态/是否核销">
          <el-input
            v-model="AddForm.Chargeoff"
            placeholder="核销状态"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="AddForm.Others"
            type="textarea"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-plus"
            >导入计划</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="SaveData()"
            >保存单据</el-button
          >
        </el-form-item>
      </el-form>
      <!--商品明细的列表-->
      <el-table
        size="small"
        :data="list4"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
        show-summary
        sum-text="合计"
        :summary-method="getSummaries"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column sortable prop="id" label="采购明细编号" width="100">
        </el-table-column>
        <el-table-column
          sortable
          prop="commodityInformationSheetId"
          label="商品编号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="productName"
          label="商品名称"
          width="100"
        >
        </el-table-column>

        <el-table-column sortable prop="quantity" label="数量" width="100">
        </el-table-column>
        <el-table-column sortable prop="uintPrice" label="单价" width="100">
        </el-table-column>

        <el-table-column sortable prop="others" label="备注" width="100">
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 生成退货应付款文件 -->
    <el-dialog title="生成退货应付款文件" :visible.sync="Dialog3" width="70%">
      <el-form :inline="true" :model="AddForm" class="user-search">
        <el-form-item label="付款日期">
          <el-date-picker
            v-model="AddForm.PayTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发生日期">
          <el-date-picker
            v-model="AddForm.HappenDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="AddForm.SupplierId" placeholder="请选择供应商">
            <el-option
              v-for="item in Suppliers"
              :key="item.id"
              :label="item.supplierName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货币">
          <el-select v-model="AddForm.Monerary" placeholder="请选择货币">
            <el-option label="人民币" value="人民币"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="应付金额">
          <el-input
            v-model="AddForm.DueMoney"
            placeholder="应付金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="已付金额">
          <el-input
            v-model="AddForm.PaidMoney"
            placeholder="已付金额"
          ></el-input>
        </el-form-item>

        <el-form-item label="余额">
          <el-input
            v-model="AddForm.RemainMoney"
            placeholder="未付金额"
          ></el-input>
        </el-form-item>

        <el-form-item label="采购/退货">
          <el-input
            disabled
            v-model="AddForm.BuyORerturn"
            placeholder="采购"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作员">
          <el-input disabled v-model="userName"></el-input>
        </el-form-item>

        <el-form-item label="核销状态/是否核销">
          <el-input
            v-model="AddForm.Chargeoff"
            placeholder="核销状态"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="AddForm.Others"
            type="textarea"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-plus"
            >导入计划</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="SaveData()"
            >保存单据</el-button
          >
        </el-form-item>
      </el-form>
      <!--退货明细明细的列表-->
      <el-table
        size="small"
        :data="list5"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
        show-summary
        sum-text="合计"
        :summary-method="getSummaries1"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>

        <el-table-column sortable prop="id" label="退货明细编号" width="100">
        </el-table-column>
        <el-table-column
          sortable
          prop="commodityInformationSheetId"
          label="商品编号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          sortable
          prop="productName"
          label="商品名称"
          width="100"
        >
        </el-table-column>

        <el-table-column sortable prop="quantity" label="数量" width="100">
        </el-table-column>
        <el-table-column sortable prop="uintPrice" label="单价" width="100">
        </el-table-column>

        <el-table-column sortable prop="others" label="备注" width="100">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 录入采购订单页面  end -->
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";

import {
  AddCaiGouOrder,
  CaiGouOrderList,
  CaigouDuepaysList,
  CaiGouReturnedList,
  CaigouEntersList,
  SupplierList,
  AddCaigouDuepays,
} from "../../api/likai";

export default {
  data() {
    return {
      //独有数据 begin==========================

      AddForm: {
        PayTime: "", //付款日期
        HappenDate: "", //发生日期
        SupplierId: "", //供应商
        Monerary: "", //货币
        DueMoney: 0, //应付金额
        PaidMoney: 0, //已付金额
        RemainMoney: 0, //余额
        BuyORerturn: 1, //采购purchase/退货salesreturn
        OperarorID: sessionStorage.getItem("userId"), //操作员
        ExaminerID: "", //审核人
        Others: "", //备注
        Chargeoff: "0", //核销状态/是否核销
      },

      //独有数据end==============================

      //公共数据begin================================

      form: {},
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      // rules表单验证
      rules: {
        deptName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        deptNo: [
          { required: true, message: "请输入部门代码", trigger: "blur" },
        ],
      },
      formInline: {
        // page: 1,
        // limit: 10,
        // varLable: "",
        // varName: "",
        // token: localStorage.getItem("logintoken"),
      },
      userName: sessionStorage.getItem("UserName"),
      userId: sessionStorage.getItem("userId"),
      userparm: [], //搜索权限
      listData: [], //用户数据
      ShopList: [], //商品数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },

      //辅助数据begin=============================
      list1: [], //应付款
      list2: [], //采购入库
      list4: [], //采购入库明细
      list3: [], //采购退货
      list5: [], //采购退货明细
      Suppliers: [], //供应商

      //辅助数据end===============================

      //对话框begin=================================

      //对话框1
      Dialog1: false,
      Dialog2: false,
      Dialog3: false,
      Dialog4: false,

      //对话框end=================================

      //公共数据end================================
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    this.getdata(this.formInline);
    this.GetAssist2();
    this.GetAssist3();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },

    //=========================================================================
    //获取数据的方法，多条件查询，分页
    getdata(parameter) {
      this.loading = true;
      CaigouDuepaysList(parameter)
        .then((res) => {
          this.loading = false;
          this.list1 = res;
          if (!res.success) {
            // this.$message({
            //   type: "info",
            //   message: res.msg,
            // });
          } else {
            this.listData = res.data;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.count;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
    },
    //添加数据的方法
    SaveData(parameter) {
      this.AddForm.OperatorID = this.UserInfosId;
      parameter = this.AddForm;
      AddCaigouDuepays(parameter)
        .then((res) => {
          if (res.success) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.Dialog2 = false;
            this.Dialog3 = false;
            this.getdata();
            this.AddForm={};
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error("获取失败，请稍后再试！");
        });
    },
    //删除数据的方法
    DeleteData(parameter) {
      Delete(parameter)
        .then((res) => {
          if (res.success) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error("获取失败，请稍后再试！");
        });
    },
    //修改数据的方法
    UpdateData(parameter) {
      Delete(parameter)
        .then((res) => {
          if (res.success) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error("获取失败，请稍后再试！");
        });
    },
    //===========================
    //辅助数据2  采购入库列表
    GetAssist2(parameter) {
      CaigouEntersList(parameter)
        .then((res) => {
          this.loading = false;
          this.list2 = res.data;

          if (!res.success) {
            // this.$message({
            //   type: "info",
            //   message: res.msg,
            // });
          } else {
            this.listData = res.data;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.count;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
    },
    //辅助数据3  采购退货列表
    GetAssist3(parameter) {
      CaiGouReturnedList()
        .then((res) => {
          this.loading = false;
          this.list3 = res;
          if (!res.success) {
            // this.$message({
            //   type: "info",
            //   message: res.msg,
            // });
          } else {
            this.listData = res.data;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.count;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
    },
    //辅助数据4  供应商列表
    GetAssist4() {
      SupplierList()
        .then((res) => {
          this.Suppliers = res;
        })
        .catch((err) => {});
    },
    //==================打开对话框
    //打开采购入库对话框
    OpenDialog2(index, row) {
      this.GetAssist4();
      this.list4 = row.caigouStorageDetails;
      console.log(this.AddForm);
      this.Dialog2 = true;
    },
    //打开采购退货对话框
    OpenDialog3(row) {
      this.AddForm.BuyORerturn = 2;
      this.GetAssist4();
      this.list5 = row.returnedDetails;
      console.log("list5=======");
      console.log(this.list5);
      console.log(this.AddForm);
      this.Dialog3 = true;
    },

    //合计的方法
    getSummaries(param) {
      console.log(param);
      const { columns, data } = param;
      const sums = [];

      var num1 = 0;
      var num2 = 0;
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);

            if (!isNaN(value)) {
              if (index === 5) {
                num1 = curr;
              }
              if (index === 6) {
                num2 = curr;
                this.AddForm.DueMoney = num1 * num2;
              }
              return prev + curr;
            } else {
              console.log(prev);
              return prev;
            }
          }, 0);

          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });
      this.AddForm.RemainMoney = this.AddForm.DueMoney - this.AddForm.PaidMoney;
      return sums;
    },
    getSummaries1(param) {
      console.log(param);
      const { columns, data } = param;
      const sums = [];

      var num1 = 0;
      var num2 = 0;
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);

            if (!isNaN(value)) {
              if (index === 4) {
                num1 = curr;
              }
              if (index === 5) {
                num2 = curr;
                this.AddForm.DueMoney = num1 * num2;
              }
              return prev + curr;
            } else {
              console.log(prev);
              return prev;
            }
          }, 0);

          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });
      this.AddForm.RemainMoney = this.AddForm.DueMoney - this.AddForm.PaidMoney;
      return sums;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 